﻿<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core" xmlns:Media="using:Microsoft.Xaml.Interactions.Media" x:Class="App1.MainPage" mc:Ignorable="d">
    <Grid Background="Black">
        <Grid Height="100" Width="500" Background="DimGray">
            <Grid.Resources>
                <Style TargetType="Grid" x:Name="HandleStyle">
                    <Setter Property="Height" Value="50" />
                    <Setter Property="Width" Value="50" />
                    <Setter Property="Background" Value="White" />
                    <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
                </Style>
                <Style TargetType="TextBlock" x:Name="HandleTextStyle">
                    <Setter Property="Foreground" Value="DimGray" />
                    <Setter Property="FontSize" Value="20" />
                    <Setter Property="TextAlignment" Value="Center" />
                    <Setter Property="HorizontalAlignment" Value="Center" />
                    <Setter Property="VerticalAlignment" Value="Center" />
                    <Setter Property="IsHitTestVisible" Value="False" />
                </Style>
            </Grid.Resources>
            <Rectangle Height="10" Width="450" Fill="DarkGray" />
            <Grid x:Name="LeftHandle" Style="{StaticResource HandleStyle}"
                  ManipulationMode="TranslateX" 
                  ManipulationDelta="LeftHandle_ManipulationDelta">
                <Grid.RenderTransform>
                    <CompositeTransform TranslateX="-200"/>
                </Grid.RenderTransform>
                <TextBlock x:Name="LeftHandleText" Text="0"
                           Style="{StaticResource HandleTextStyle}" />
            </Grid>
            <Grid x:Name="RightHandle" Style="{StaticResource HandleStyle}"
                  ManipulationMode="TranslateX" 
                  ManipulationDelta="RightHandle_ManipulationDelta" RenderTransformOrigin="0.5,0.5">
                <Grid.RenderTransform>
                    <CompositeTransform TranslateX="-150"/>
                </Grid.RenderTransform>
                <TextBlock x:Name="RightHandleText" Text="0"
                           Style="{StaticResource HandleTextStyle}" />
            </Grid>
        </Grid>
    </Grid>
</Page>
